<template>
  <erp-form-popover
    :title="title"
    :field="field"
    :value="value"
    :props="props"
    :extra="extraCom"
    :options="computedOptions"
    :form="form"
    @value-change="handleValueChange"
    @update-id-field="handleUpdateField"
  />
</template>

<script>
import ErpFormPopover from './ErpFormPopover';
/**
 * 物料
 */
export default {
  name: "ErpFormInvRealList",
  components: {
    ErpFormPopover
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      type: [String, Number],
      default: ''
    },
    /**
     * 属性
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 额外参数
     * ```js
     * return {
          // 表单需要的id字段
          idField: '',
          inputPlaceholder: '',
          modalTitle: '',
          modalWidth: null,
          modalHeight: null,
          // 模态框表格中name对应的字段名
          modalNameField: null,
          // 模态框表格中id对应的字段名
          modalIdField: null,
          // 是否转换为字符串
          needToString: false,
          // 类型 15：纺织品 16：备件 17：原料
          materialTypeId: null,
          // 关联额外字段，除了id和name之外还需要关联字段时
          extraData: [
            // {
            //     // 外部id
            //     field: "userId",
            //     // 内部id
            //     relatedField: "id",
            // }
          ]
        }
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
          // 表单需要的id字段
          idField: '',
          inputPlaceholder: '',
          modalTitle: '',
          modalWidth: null,
          modalHeight: null,
          // 模态框表格中name对应的字段名
          modalNameField: null,
          // 模态框表格中id对应的字段名
          modalIdField: null,
          // 是否转换为字符串
          needToString: false,
          // 类型 15：纺织品 16：备件 17：原料
          materialTypeId: null,
          // 关联额外字段，除了id和name之外还需要关联字段时
          extraData: [
            // {
            //     // 外部id
            //     field: "userId",
            //     // 内部id
            //     relatedField: "id",
            // }
          ]
        };
      }
    },
    options: {
      type: Object,
      default() {
        return {};
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    materialTypeId () {
      return this.extra && this.extra.materialTypeId ? this.extra.materialTypeId : 15;
    },
    extraCom () {
      let defaultConfig = {
        // 表单需要的id字段
        idField: '',
        inputPlaceholder: '物料',
        modalTitle: '',
        modalWidth: null,
        modalHeight: null,
        // 模态框表格中name对应的字段名
        modalNameField: null,
        // 模态框表格中id对应的字段名
        modalIdField: null,
        // 是否转换为字符串
        needToString: false,
        // 类型 15：纺织品 16：备件 17：原料
        materialTypeId: null,
        // 关联额外字段，除了id和name之外还需要关联字段时
        extraData: [
          // {
          //     // 外部id
          //     field: "userId",
          //     // 内部id
          //     relatedField: "id",
          // }
        ]
      };
      defaultConfig.template = 'var name = form.materialName || ""; let specs = form.materialSpecs || ""; return name + specs';
      return Object.assign(defaultConfig, this.extra);
    },
    computedOptions () {
      return this.options;
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 值变化
     * @public
     * @param value
     */
    handleValueChange (value) {
      /**
       * 通知父组件更新值
       */
      this.$emit('value-change', value);
    },
    /**
     * 更新表单其他值
     * @public
     * @param {object} obj 表单其他值对象
     */
    handleUpdateField (obj) {
      /**
       * 更新表单其他值
       * @param {object} obj 表单其他值对象
       */
      this.$emit('update-id-field', obj);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
